import React from 'react';
import { Layout, Menu, Dropdown, Button } from 'antd';
import { UserOutlined, DownOutlined } from '@ant-design/icons';
import { Link,useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import {logout} from '../store/actions/user'
import './Header.scss';

const { Header: AntHeader } = Layout;
// 假设我们有一个 logout 函数用于处理登出逻辑
const menuItems = [
  {
    key: '0',
    label: "个人中心",
  },
  {
    key: '1',
    label: "退出登录",
  }
];

// 用户菜单配置
// const menus = (
//   <Menu>
//     <Menu.Item key="0">
//       <Link to="/profile">个人中心</Link>
//     </Menu.Item>
//     <Menu.Divider />
//     <Menu.Item key="1" onClick={logout}>
//       退出登录
//     </Menu.Item>
//   </Menu>
// );



const Header = () => {
  
const dispatch = useDispatch();
const navigate = useNavigate();
const userInfo = useSelector(state => state.user.user);
console.log('========userinfo====',userInfo);
const menus = (
  <Menu items={menuItems}>
  </Menu>
);
const items= [
  {
    key: '1',
    label: (<Link to="/profile">个人中心</Link>),
  },
  {
    key: '2',
    label: (<Button type='link' onClick={() => handleLogout()}> 退出登录</Button>),
  }
];
const navItems = [
  {
    key: '1',
    label: <Link to="/">首页</Link>,
  }
]

const dropdownButton = (
  <Button type="link" style={{ color: 'lightblue', fontSize: '16px' }}>
    <UserOutlined /> {userInfo?.userName} <DownOutlined />
  </Button>
);

const handleLogout = () => {
  // 清除本地存储或状态中的用户信息
  console.log('Logout');
  dispatch(logout()); // 调用 Redux action 处理登出
  navigate('/login'); // 跳转到登录页面
};

  return (
  <AntHeader style={{ 
    position: 'fixed', 
    
    zIndex: 1, 
    width: '90%', 
    display: 'flex', // 添加flexbox布局
    justifyContent: 'space-between', // 主轴两端对齐
    alignItems: 'center' // 交叉轴居中对齐
    , background: 'white'
  }}>
    {/* <div className="logo" /> */}
    <div>
    <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']} selectable={false} items={navItems}>
    </Menu>
    </div>
    <div>
    <Dropdown menu={{ items }} placement="topRight" arrow>
        {dropdownButton}
      </Dropdown>
    </div>
  </AntHeader>
)};

export default Header;